<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue过滤器</title>
    <script src="../js/vue.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
    <link rel="stylesheet" type="text/css" href="../style/bootstrap/css/bootstrap.css">
    <style>
        li{
            text-decoration: none;
            list-style-type: none;
        }
    </style>
</head>
<body>
<div id="app">
    <button>
        {{text|filterA}}
    </button>
</div>

<div id="app2">
    <div id="container2">
        <form accept-charset="utf-8" action="https://www.baidu.com"  @keyup.enter="submit">
            <label>your username</label>
            <input type="text"><br>
            <label>your password</label>
            <input type="password"><br>
            <input class="btn btn-success" type="submit">
        </form>
        <button class="btn btn-default" name="maopao">{{info}}</button><br>
        <ul>
           <li v-for="(value, key, index) in userinfo">
               {{index}}.{{key}}:{{value}}
           </li>
        </ul>
        <ul>
            <li v-for="item of items">
                {{item.news}}+{{item.date}}
            </li>
        </ul>
        <p>n in even(numbers)</p>
        <ul>
            <li v-for="n in even(numbers)">{{n}}</li>
        </ul>
        <button @click="postion($event)">测试按钮</button>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            text: 'bjming'
        },
        filters: {
            filterA: function (value) {//filter中 第一个参数指需要过滤的内容， function(){}中不使用return 则过滤函数没有返回值
                if (!value) return ''
                value = value.toString();
                value = value.charAt(0).toUpperCase() + value.slice(1);
                return value;
            },
            filterB: function (value) {
                if (!value) return ''
                value = value.toString();
                value = value.charAt(0).toLowerCase() + value.slice(1);
                return value;
            }
        }
    })

    var vm2 = new Vue({
        el:'#app2',
        data:{
            info:'bjming',
            userinfo:{
                username:'BJming',
                password:'123456',
                status:'safe',
                onlinetime:6
            },
            items:[
                {news:'One',date:'20160517'},
                {news:'Two',date:'20160518'},
                {news:'Third',date:'20160619'}
            ],
            numbers:[1,2,3,4,5]
        },
        methods:{
            even:function (numbers) {
                return numbers.filter(function (number) {
                    return number % 2 ===0
                })
            },
            postion:function (event) {
                event = event || window.event;
                //现在我们可以访问原生事件对象
                alert('x:'+event.pageX + 'y:'+event.pageY);
//                console.log(event.screenX) // 获取鼠标基于屏幕的X轴坐标
//                console.log(event.screenY) // 获取鼠标基于屏幕的Y轴坐标
//                console.log(event.clientX) // 获取鼠标基于浏览器窗口的X轴坐标
//                console.log(event.clientY) // 获取鼠标基于浏览器窗口的Y轴坐标
//                console.log(event.pageX) // 获取鼠标基于文档的X轴坐标
//                console.log(event.pageY) // 获取鼠标基于文档的Y轴坐标
            }
        }
    })
</script>
</html>